<template>
  <div class="footer-container">
    <div class="wrapper">
      <div class="content-container">
        <div class="logo-content">
          <div class="logo-container">
            <img :src="enterpriseInfo.logo" alt="logo">
            <div class="title">
              <span class="cn">{{enterpriseInfo.abbreviation}}</span>
              <span class="en">{{enterpriseInfo.enName}}</span>
            </div>
            <div class="desc">
              {{enterpriseInfo.slogan}}
            </div>
          </div>
          <div class="description">
            {{enterpriseInfo.description}}
          </div>
        </div>
        <div class="content">
          <div class="title">
            联系我们
          </div>
          <div class="item">
            <div class="label">地址：</div>
            <div class="value">广州市番禺区天安科技产业大厦1座5楼</div>
          </div>
          <div class="item">
            <div class="label">热线：</div>
            <div class="value">+86-(020)-28697181</div>
          </div>
          <div class="item">
            <div class="label">邮箱：</div>
            <div class="value">austxg062xw@163.com</div>
          </div>
        </div>
        <div class="content">
          <div class="title">
            快捷链接
          </div>
          <div class="link" v-for="item in btnOptions" :key="item" @click="goPage(item.name)">
            {{ item.title }}
          </div>
        </div>
        <div class="content">
          <div class="title">
            了解更多
          </div>
          <div class="code">
            <div class="value">
              <img :src="code" alt="二维码">
            </div>
            <div class="text">微信公众号</div>
          </div>
        </div>
      </div>
      <div class="copyright">
        <div class="item">Copyright © 2015-2023 广州图慧信息科技有限公司 版权所有。</div>
        <div class="item">粤ICP备2020122410号</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import code from '@/assets/imgs/2w.png';
import {pageOptions} from "@/utils/data.js";
import {useRouter} from "vue-router";
import {enterprise} from "@/utils/data";
const router = useRouter();

const btnOptions = pageOptions;
const enterpriseInfo = enterprise;

const goPage = (name) => {
  router.push(name);
}
</script>

<style lang="scss" scoped>
.footer-container {
  width: 100%;
  background-color: #fbfbfb;
  @include flex($row: center);
  .wrapper{
    width: $maxWidth;
    user-select: none;
  }
  .content-container {
    padding: 50px 0;
    @include flex();

    .logo-content, .content {
      margin-right: 50px;
      margin-bottom: 30px;
      //font-weight: bold;
      color: #1d1d1f;

    }

    .logo-content {
      width: 350px;

      .logo-container {
        height: $headerHeight;
        margin-bottom: 15px;
        @include flex($col: center);

        img {
          height: 80%;
          margin-right: 10px;
        }

        .title {
          font-weight: bold;
          padding-right: 8px;
          //border-right: 1px solid #1d1d1f;
          @include flex($row: center, $direc: column);

          .cn {
            letter-spacing: 4px;
            font-size: 18px;
          }

          .en {
            font-size: 12px;
          }
        }

        .desc {
          letter-spacing: 3px;
          border-left: 1px solid #1d1d1f;
          padding-left: 9px;
          font-size: 18px;
          font-weight: bold;
        }
      }

      .description {
        text-indent: 2em;
        font-size: 13px;
        line-height: 2;
        color: #424245;
      }
    }

    .content {
      flex: 1;

      .title {
        height: $headerHeight;
        line-height: $headerHeight;
        font-weight: bold;
        margin-bottom: 15px;
        font-size: 18px;
      }

      .item, .link {
        font-size: 13px;
        line-height: 2;
        margin-bottom: 10px;
        color: #424245;
        @include flex();

        .label {
          width: 45px;
        }

        .value {
          flex: 1;
        }
      }

      .link {
        cursor: pointer;
        color: #424245;
      }

      .link:hover {
        text-decoration: underline;
      }

      .code {
        font-size: 12px;
        color: #424245;
        .text {
          text-align: center;
        }
      }
    }

  }
  .copyright{
    padding: 10px 0;
    font-size: 12px;
    border-top: 1px solid #d2d2d7;
    color: #6e6e73;
    .item{
      margin-bottom: 10px;
    }
  }
}
</style>
